// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

.@{prefix}-tabs {
  position: relative;

  &__nav {
    position: relative;
    overflow: hidden;
    user-select: none;
    background-color: @tab-nav-bg-color;

    &-wrap {
      display: flex;
      position: relative;
    }

    &-item {
      flex: 1;
      text-align: center;
      color: @tab-nav-text-color;
      font-size: @tab-nav-font-size;
      height: @tab-nav-height;
      line-height: @tab-nav-height;
      position: relative;
      padding: @tab-nav-item-padding;
      display: inline-block;

      &.@{prefix}-is-active {
        color: @tab-nav-active-color;
        font-family: @font-family-medium;
      }

      &.@{prefix}-is-disabled {
        color: @tab-nav-disabled-color;
        cursor: not-allowed;
      }

      &::after {
        content: "";
        width: 100%;
        height: 1px;
        transform: scaleY(.5);
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: @tab-line-color;
      }
    }

    &-line {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: @tab-line-width;
      height: @tab-line-height;
      background-color: @tab-line-active-color;
      transition: all .3s cubic-bezier(.645, .045, .355, 1);
    }

    &--scroll {

      .@{prefix}-tabs__nav-item {
        flex: 1 0 auto;
        margin-bottom: 10px;
      }

      .@{prefix}-tabs__nav-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin-bottom: -10px;
      }

      .@{prefix}-tabs__nav-line {
        bottom: 10px;
      }
    }
  }

  &--horizontal {
    display: flex;

    .@{prefix}-tabs__nav--scroll {

      .@{prefix}-tabs__nav-wrap {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        margin-right: -10px;
      }

      .@{prefix}-tabs__nav-item {
        margin-right: 10px;
        margin-bottom: 0;
      }
    }

    .@{prefix}-tabs__content {
      flex: 1;
    }

    .@{prefix}-tabs__nav {
      background-color: @tab-nav-horizontal-bg-color;

      &-wrap {
        flex-direction: column;
      }

      &-line {
        top: 0;
        left: 0;
        width: @tab-line-height;
        height: @tab-nav-horizontal-item-height;
      }

      &-item {
        display: block;
        flex: 1 0 auto;
        width: @tab-nav-horizontal-item-width;
        height: @tab-nav-horizontal-item-height;
        line-height: @tab-nav-horizontal-item-height;
        padding: @tab-nav-horizontal-item-padding;

        &::after {
          content: none;
        }

        &.@{prefix}-is-active {
          background-color: @tab-nav-bg-color;
        }
      }
    }
  }

  &__content {
    position: relative;
    overflow: hidden;
  }

  &__panel {
    background-color: @tab-panel-bg-color;
  }
}
